<template>
    <div>
        <div class="statistics">
            <div class="statisticsItem one">
                <div class="title">本周转运量（吨）</div>
                <div class="number">{{transferTotalObj.weekTransferTotal}}</div>
                <div class="compare">
                    <span>总批次</span>
                    <span>{{transferTotalObj.weekBatchTotal}}</span>
                </div>
            </div>
            <div class="cut"></div>
            <div class="statisticsItem two">
                <div class="title">本月转运量（吨）</div>
                <div class="number">{{transferTotalObj.monthTransferTotal}}</div>
                <div class="compare">
                    <span>总批次</span>
                    <span>{{transferTotalObj.monthBatchTotal}}</span>
                </div>
            </div>
            <div class="cut"></div>
            <div class="statisticsItem three">
                <div class="title">本季度转运量（吨）</div>
                <div class="number">{{transferTotalObj.quarterTransferTotal}}</div>
                <div class="compare">
                    <span>总批次</span>
                    <span>{{transferTotalObj.quarterBatchTotal}}</span>
                </div>
            </div>
            <div class="cut"></div>
            <div class="statisticsItem four">
                <div class="title">本年转运量（吨）</div>
                <div class="number">{{transferTotalObj.yearTransferTotal}}</div>
                <div class="compare">
                    <span>总批次</span>
                    <span>{{transferTotalObj.yearBatchTotal}}</span>
                </div>
            </div>
        </div>
        <div class="chartInfo">
            <div class="chart itembox">
                <div class="itemboxTitle">转运量统计</div>
                <div class="timeChange">
                    <el-radio-group
                        v-model="dateType"
                        size="default"
                        @change="dateTypeChange"
                    >
                        <el-radio-button
                            label="本周"
                            value="1"
                        />
                        <el-radio-button
                            label="本月"
                            value="2"
                        />
                        <el-radio-button
                            label="本季度"
                            value="3"
                        />
                        <el-radio-button
                            label="本年"
                            value="4"
                        />
                    </el-radio-group>
                </div>
                <div class="unit">单位：吨</div>
                <div class="chartBox">
                    <div
                        class="chartItem"
                        style="width: 30%"
                    >
                        <chart-line-bar
                            :chartData="depTotalChartDataList"
                            xAxisName="dateStr"
                            :option="option"
                            :chartType="chartTypeTotal"
                            :twoYAxis="false"
                            :orient="'horizontal'"
                        ></chart-line-bar>
                    </div>
                    <div
                        class="chartItem"
                        style="width: 70%"
                    >
                        <chart-line-bar
                            :chartData="detailTotalChartDataList"
                            xAxisName="dateStr"
                            :option="option"
                            :chartType="chartType"
                            :twoYAxis="false"
                            :orient="'horizontal'"
                        ></chart-line-bar>
                    </div>
                </div>
                <div class="legend">
                    <p v-if="localTypeUnit == '1'"><span class="round bg1"></span><span>公司</span></p>
                    <p v-if="localTypeUnit == '1' || localTypeUnit == '2'"><span class="round bg2"></span><span>星沙厂</span></p>
                    <p v-if="localTypeUnit == '1' || localTypeUnit == '6'"><span class="round bg6"></span><span>城东厂</span></p>
                    <p v-if="localTypeUnit == '1' || localTypeUnit == '4'"><span class="round bg4"></span><span>城北厂</span></p>
                    <p v-if="localTypeUnit == '1' || localTypeUnit == '5'"><span class="round bg5"></span><span>城南厂</span></p>
                    <p v-if="localTypeUnit == '1' || localTypeUnit == '3'"><span class="round bg3"></span><span>城西厂</span></p>
                </div>
            </div>
            <div class="cut"></div>
            <div class="info itembox">
                <div class="itemboxTitle">今日转运信息</div>
                <div class="staticTotal">
                    <div class="staticTotalItem">
                        <p
                            class="numb"
                            style="color: #38acf5;"
                        >{{transferTotalObj.underway}}</p>
                        <p>进行中</p>
                    </div>
                    <div class="staticTotalItem">
                        <p
                            class="numb"
                            style="color: #3fc8a9;"
                        >{{ transferTotalObj.completed }}</p>
                        <p>已完成</p>
                    </div>
                </div>
                <div class="detail">
                    <el-scrollbar height="266px">
                        <p
                            v-for="item in transferTotalObj.exceptionRecordList"
                            :key="item.id"
                            class="scrollbar-demo-item"
                        >{{item.msg}}</p>
                        <el-empty
                            description="暂无异常"
                            v-show="transferTotalObj.exceptionRecordList && transferTotalObj.exceptionRecordList.length == 0"
                            :image-size="60"
                        />
                    </el-scrollbar>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import transferRecordHttp from "@/https/transferRecord.js";
import Storage from "@/utils/storage.js"; // storage工具类，简单的封装
import { onMounted, ref } from "vue";
import ChartLineBar from "./components/ChartLineBar.vue";
const dateType = ref('1')

const localTypeUnit = ref(Storage.localGet("depId"));
let depTotalChartDataList = ref([]);
let detailTotalChartDataList = ref([]);
const option = ref({});

const chartType = ref([
    {
        type: "line",
        code: "2",
        name: "星沙厂",
        linerColor: ["#FA708B", "#FA708B"],
    },
    {
        type: "line",
        code: "6",
        name: "城东厂",
        linerColor: ["#38ACF5", "#38ACF5"],
    },
    {
        type: "line",
        code: "4",
        name: "城北厂",
        linerColor: ["#8E6BEB", "#8E6BEB"],
    },
    {
        type: "line",
        code: "5",
        name: "城南厂",
        linerColor: ["#3FC8A9", "#3FC8A9"],
    },
    {
        type: "line",
        code: "3",
        name: "城西厂",
        linerColor: ["#FEA014", "#FEA014"],
    },
]);
const chartType2 = ref([
    {
        type: "line",
        code: "2",
        name: "星沙厂",
        linerColor: ["#FA708B", "#FA708B"],
    },
]);
const chartType6 = ref([
    {
        type: "line",
        code: "6",
        name: "城东厂",
        linerColor: ["#38ACF5", "#38ACF5"],
    },
]);
const chartType4 = ref([
    {
        type: "line",
        code: "4",
        name: "城北厂",
        linerColor: ["#8E6BEB", "#8E6BEB"],
    },
]);
const chartType5 = ref([
    {
        type: "line",
        code: "5",
        name: "城南厂",
        linerColor: ["#3FC8A9", "#3FC8A9"],
    },
]);
const chartType3 = ref([
    {
        type: "line",
        code: "3",
        name: "城西厂",
        linerColor: ["#FEA014", "#FEA014"],
    },
]);
const chartTypeTotal = ref([
    {
        type: "bar",
        code: "1",
        name: "公司",
        linerColor: ["#E6A23C", "#E6A23C"],
    },
    {
        type: "bar",
        code: "2",
        name: "星沙厂",
        linerColor: ["#FA708B", "#FA708B"],
    },
    {
        type: "bar",
        code: "6",
        name: "城东厂",
        linerColor: ["#38ACF5", "#38ACF5"],
    },
    {
        type: "bar",
        code: "4",
        name: "城北厂",
        linerColor: ["#8E6BEB", "#8E6BEB"],
    },
    {
        type: "bar",
        code: "5",
        name: "城南厂",
        linerColor: ["#3FC8A9", "#3FC8A9"],
    },
    {
        type: "bar",
        code: "3",
        name: "城西厂",
        linerColor: ["#FEA014", "#FEA014"],
    },
]);

const chartTypeTotal2 = ref([
    {
        type: "bar",
        code: "2",
        name: "星沙厂",
        linerColor: ["#FA708B", "#FA708B"],
    },
]);
const chartTypeTotal6 = ref([
    {
        type: "bar",
        code: "6",
        name: "城东厂",
        linerColor: ["#38ACF5", "#38ACF5"],
    },
]);
const chartTypeTotal4 = ref([
    {
        type: "bar",
        code: "4",
        name: "城北厂",
        linerColor: ["#8E6BEB", "#8E6BEB"],
    },
]);
const chartTypeTotal5 = ref([
    {
        type: "bar",
        code: "5",
        name: "城南厂",
        linerColor: ["#3FC8A9", "#3FC8A9"],
    },
]);
const chartTypeTotal3 = ref([
    {
        type: "bar",
        code: "3",
        name: "城西厂",
        linerColor: ["#FEA014", "#FEA014"],
    },
]);
if (localTypeUnit.value == '1') {
} else if (localTypeUnit.value == '2') {
    chartTypeTotal.value = chartTypeTotal2.value
    chartType.value = chartType2.value
} else if (localTypeUnit.value == '3') {
    chartTypeTotal.value = chartTypeTotal3.value
    chartType.value = chartType3.value
} else if (localTypeUnit.value == '4') {
    chartTypeTotal.value = chartTypeTotal4.value
    chartType.value = chartType4.value
} else if (localTypeUnit.value == '5') {
    chartTypeTotal.value = chartTypeTotal5.value
    chartType.value = chartType5.value
} else if (localTypeUnit.value == '6') {
    chartTypeTotal.value = chartTypeTotal6.value
    chartType.value = chartType6.value
}
const transferTotalObj = ref({})
const getTransferTotal = async () => {
    const res = await transferRecordHttp.transferTotal({})
    console.log(res.data)
    if (res.data.code == 200) {
        transferTotalObj.value = res.data.data
        console.log(transferTotalObj.value)
    }
}
const dateTypeChange = async (v) => {
    getTransferAmount()
}
const getTransferAmount = async () => {
    const res = await transferRecordHttp.transferAmount(dateType.value)
    console.log(res.data)
    if (res.data.code == 200) {
        detailTotalChartDataList.value = []
        depTotalChartDataList.value = []
        let detailListChartList = []
        let depTotalChartList = []
        if (res.data.data) {
            res.data.data.detailList.forEach(item => {
                let detailListChartListItem = {}
                detailListChartListItem = {
                    dateStr: item.dateStr,
                    2: '',
                    3: '',
                    4: '',
                    5: '',
                    6: '',
                    ...item.depDataMap
                }
                detailListChartList.push(detailListChartListItem)
            })
            detailTotalChartDataList.value = detailListChartList
            let depTotalChartListItem = {}
            depTotalChartListItem = {
                dateStr: '合计',
                2: '',
                3: '',
                4: '',
                5: '',
                6: '',
                ...res.data.data.depTotal
            }
            depTotalChartList.push(depTotalChartListItem)
            depTotalChartDataList.value = depTotalChartList
            // depTotalChartDataList.value = chartList
        }
    }
}
onMounted(() => {
    getTransferTotal()
    getTransferAmount()
})
</script>

<style scoped lang="less">
.statistics {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 20px;
    .cut {
        width: 20px;
    }
    .statisticsItem {
        flex: 1;
        border-radius: 10px;
        box-sizing: border-box;
        padding: 22px 16px;
        color: #fff;
        font-size: 14px;
        &.one {
            background: #fa708b;
        }
        &.two {
            background: #38acf5;
        }
        &.three {
            background: #8e6beb;
        }
        &.four {
            background: #3fc8a9;
        }
        .number {
            margin: 16px 0;
            font-size: 24px;
            font-weight: bold;
        }
        .compare {
            .res {
                margin: 0 5px 0 10px;
                img {
                    width: 14px;
                    &.up {
                        transform: rotate(0deg);
                    }
                    &.down {
                        transform: rotate(180deg);
                    }
                }
            }
        }
    }
}

.chartInfo {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 20px;
    .cut {
        width: 20px;
    }
    .itembox {
        background: #fff;
        border-radius: 10px;
        box-sizing: border-box;
        padding: 16px;
        position: relative;
        .itemboxTitle {
            font-size: 18px;
            font-weight: bold;
            position: absolute;
            left: 0;
            top: 20px;
            line-height: 32px;
            padding-left: 10px;
            border-left: 3px solid #38acf5;
        }
    }
    .chart {
        width: 75%;
        .timeChange {
            display: flex;
            justify-content: center;
            margin-top: 4px;
        }
        .unit {
            position: absolute;
            top: 20px;
            right: 20px;
            line-height: 32px;
            color: #666;
            font-size: 16px;
        }
    }
    .info {
        padding-top: 60px;
        width: 25%;
        .staticTotal {
            background: rgba(244, 246, 248, 1);
            border-radius: 10px;
            display: flex;
            flex-direction: row;
            margin-bottom: 20px;
            .staticTotalItem {
                flex: 1;
                padding: 16px 0;
                p {
                    text-align: center;
                    line-height: 32px;
                    font-size: 16px;
                    color: #738394;
                    &.numb {
                        font-size: 18px;
                        font-weight: bold;
                    }
                }
            }
        }
        .detail {
            p {
                line-height: 2;
                font-size: 14px;
                color: #666;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
    }
}
.chartBox {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
}
.legend {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    p {
        font-size: 14px;
        color: #666;
        margin: 0 10px;
        .round {
            width: 12px;
            height: 12px;
            border-radius: 6px;
            display: inline-block;
            margin: 0 4px;
            &.bg1 {
                background: #e6a23c;
            }
            &.bg2 {
                background: #fa708b;
            }
            &.bg3 {
                background: #fea014;
            }
            &.bg4 {
                background: #8e6beb;
            }
            &.bg5 {
                background: #3fc8a9;
            }
            &.bg6 {
                background: #38acf5;
            }
        }
    }
}
</style>
